<script lang="ts">
	import { type NodeProps } from '@xyflow/svelte';
	import NodeWrap from '../base/NodeWrap.svelte';
	import { LibraryBig, PenLine } from 'lucide-svelte';
	import { NodeInfo } from '$lib/api/proto/roadmap_data_api';
	import { roadmapStore } from '../../store.svelte';
	import { Any } from '$lib/api/proto/google/protobuf/any';
	import { InnerResourceData } from '$lib/api/proto/roadmap_data_type_api';
	import { RESOURCE_TYPE } from '$lib/api/proto/resource_api';
	import type { CardStateSummaryInfo } from '$lib/api/proto/resource_card_api';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import { appStore } from '$lib/stores/app.svelte';
	import type { ExamStateSummaryInfo } from '$lib/api/proto/resource_exam_api';

	const props: NodeProps = $props();

	const nodeContent = $derived(
		Any.unpack((props.data as unknown as NodeInfo).content!, InnerResourceData)
	);

	let cardStateSummary = $state(null as CardStateSummaryInfo | null);
	let examStateSummary = $state(null as ExamStateSummaryInfo | null);

	async function loadCardStatesummary() {
		if (userStore.userSession == null || userStore.userInfo == null) {
			cardStateSummary = null;
			return;
		}
		if (nodeContent.resourceType != RESOURCE_TYPE.RESOURCE_TYPE_CARD) {
			cardStateSummary = null;
			return;
		}
		if (roadmapStore.roadmapMode == 'edit') {
			cardStateSummary = null;
			return;
		}
		if (roadmapStore.roadmapMode == 'view' && roadmapStore.targetMemberUserId == '') {
			cardStateSummary = null;
			return;
		}
		const res = await callApi(
			appStore.resourceCardApiClient.getStateSummaryByRoadmap({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: props.id,
				targetMemberUserId:
					roadmapStore.roadmapMode == 'update'
						? userStore.userInfo.userId
						: roadmapStore.targetMemberUserId
			}).response
		);
		cardStateSummary = res.summary ?? null;
	}

	async function loadExamStatesummary() {
		if (userStore.userSession == null || userStore.userInfo == null) {
			examStateSummary = null;
			return;
		}
		if (nodeContent.resourceType != RESOURCE_TYPE.RESOURCE_TYPE_EXAM) {
			examStateSummary = null;
			return;
		}
		if (roadmapStore.roadmapMode == 'edit') {
			examStateSummary = null;
			return;
		}
		if (roadmapStore.roadmapMode == 'view' && roadmapStore.targetMemberUserId == '') {
			examStateSummary = null;
			return;
		}
		const res = await callApi(
			appStore.resourceExamApiClient.getStateSummaryByRoadmap({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: props.id,
				targetMemberUserId:
					roadmapStore.roadmapMode == 'update'
						? userStore.userInfo.userId
						: roadmapStore.targetMemberUserId
			}).response
		);
		examStateSummary = res.summary ?? null;
	}

	$effect(() => {
		loadCardStatesummary();
		loadExamStatesummary();
	});

	$effect(() => {
		if (props.selected && roadmapStore.resourceStateVersion != null) {
			loadCardStatesummary();
			loadExamStatesummary();
		}
	});
</script>

<NodeWrap nodeProps={props} nodeName="资料库">
	{#snippet nodeIcon()}
		<LibraryBig />
	{/snippet}
	{#snippet editIcon()}
		<button
			type="button"
			title="修改"
			class="btn btn-ghost btn-sm z-50"
			onclick={() => {
				roadmapStore.editNode = props.data as unknown as NodeInfo;
				roadmapStore.editNodeType = 'InnerResourceData';
			}}
		>
			<PenLine size={14} />
		</button>
	{/snippet}
	{#snippet bottomBar()}
		{#if cardStateSummary != null}
			<div
				class="absolute -bottom-[16px] right-[20px] rounded-box bg-success text-success-content z-[100] p-1 pl-2 pr-2 flex gap-2"
			>
				<div>了解:{cardStateSummary.knowCount}</div>
				<div>熟悉:{cardStateSummary.knowWellCount}</div>
				<div>掌握:{cardStateSummary.masterCount}</div>
				<div>精通:{cardStateSummary.skillfulCount}</div>
			</div>
		{:else if examStateSummary != null}
			<div
				class="absolute -bottom-[16px] right-[20px] rounded-box bg-success text-success-content z-[100] p-1 pl-2 pr-2 flex gap-2"
			>
				<div>答题数:{examStateSummary.answerCount}</div>
			</div>
		{/if}
	{/snippet}
	<div class="prose p-1">
		<h3>资料库名称:{nodeContent.resourceName}</h3>
		<h3>
			资料库类型:
			{#if nodeContent.resourceType == RESOURCE_TYPE.RESOURCE_TYPE_CARD}
				知识卡片
			{:else if nodeContent.resourceType == RESOURCE_TYPE.RESOURCE_TYPE_EXAM}
				试题
			{/if}
		</h3>
	</div>
</NodeWrap>
